<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>VUE Template</title>
    <script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
    <div id="root">
        <h2>a的值是{{numbers.a}},b的值是{{numbers.b}}</h2>
        <button @click="adda">点我a+1</button>
        <button @click="addb">点我b+1</button>
    </div>
</body>
    <script type="text/javascript">
        
        const vm = new Vue({
            el:'#root',
            data:{              
                name:'trentwu',
                isHot:true,
                numbers:{
                    a:1,
                    b:2
                }
                
            },
            methods:{
                adda(){
                    this.numbers.a++;
                },
                addb(){
                    this.numbers.b++;
                }
            },
            computed:{

            },
            watch:{
                //监视多级结构某个属性变化
                'numbers.a':{
                    handler(){
                        console.log("a is call")
                    }
                },
                'numbers.b':{
                    handler(){
                        console.log("b is call")
                    }
                },
                numbers:{
                    //监视多级结构所有属性的变化
                    deep:true,
                    handler(){
                        console.log('numbers call')
                    }
                }

                
            }

        })

        vm.$watch('name',{
            handler(newValue,o){
                        console.log('name被修改',newValue,o)
            }
        })
    </script>
</html>